<template>
<d2-container>
  <el-card class="order-list" shadow="never">
    <el-form :inline="true" :model="queryData" class="demo-form-inline">
      <el-form-item label="活动名称">
        <el-select v-model="queryData.aid" filterable>
          <el-option label="全部" value="" />
          <el-option v-for="item in aidArr" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryData.state" filterable>
          <el-option label="全部" value="" />
          <el-option label="未中奖" value="0" />
          <el-option label="已中奖" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="UID：" prop="uid">
          <el-input v-model="queryData.uid" placeholder="请输入UID" />
        </el-form-item>
      <el-form-item>
        <div style="display: flex;align-items: center;justify-content: space-between;width:400px">
          <el-button :loading="tableLoading" @click="queryHandler">查询</el-button>
          <div>
            <el-button type="primary" @click="daocbtn">导出中奖数据</el-button>
            <el-button style="margin-left:20px" type="primary" @click="addHandler">指定中奖</el-button>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <el-table v-loading="tableLoading" :data="tableData" stripe>
      <el-table-column type="index" label="编号" width="50" />
      <el-table-column label="活动名称">
        <template slot-scope="{ row }">
          <div> {{ getBackName(row) }}</div>
        </template>
      </el-table-column>
       <el-table-column prop="uid" label="UID" />
       <el-table-column prop="username" label="昵称" />
        <el-table-column prop="headimgurl" label="头像" width="90">
        <template slot-scope="{ row }">
          <el-image
            v-if="row.headimgurl"
            style="width: 50px; height: 50px"
            :src="row.headimgurl"
            :preview-src-list="[row.headimgurl]"
          />
          <span v-else>暂无图片</span>
        </template>
      </el-table-column>
       <el-table-column prop="phone" label="电话" />
        <el-table-column prop="gid" label="是否中奖">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.gid === 0" type="warning">否</el-tag>
          <el-tag v-else>是</el-tag>
        </template>
      </el-table-column>
       <el-table-column  prop="scope" label="类型">
        <template slot-scope="scope">
          <div v-if="scope.row.gid > 0">
            <div v-if="scope.row.type == '0'">实物</div>
            <div v-else-if="scope.row.type == '1'">现金</div>
            <div v-else>金币</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="奖品名称" />
       <el-table-column prop="state" label="状态">
        <template slot-scope="scope" width="400">
          <div v-if="scope.row.gid > 0">
            <el-tag v-if="scope.row.state == 0">无</el-tag>
            <el-tag v-else-if="scope.row.state === 1" type="success">{{scope.row.type == '0'? '已使用' : '已到账'}}</el-tag>
            <el-tag v-else type="warning" >{{scope.row.type == '0'? '未使用' : '发放失败'}}</el-tag>
            <span style="cursor: pointer;" v-if="scope.row.state === 2 && scope.row.type != '0'" @click="bufbtn(scope.row)">补发</span>
          </div>
        </template>
      </el-table-column>
       <el-table-column prop="use_time" label="核销时间" />
       <el-table-column prop="dateline" label="参与时间" />
       <el-table-column prop="state" label="是否后台设置中奖">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isset === 0" type="warning">否</el-tag>
          <el-tag v-else>是</el-tag>
        </template>
      </el-table-column>
       <!-- <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editHandler(scope.row)">帮砍记录</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination :total="pagination.total" :page-size="pagination.pageSize" @current-change="changeHandler" />
    <el-dialog :title="dialogFormTitle" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      <!-- :rules="rules" -->
      <el-form ref="form" :model="formData" label-width="120px" width="40%">
        <el-form-item label="活动：" prop="aid">
          <el-select v-model="formData.aid" filterable>
            <el-option v-for="item in aidArr" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
          <el-button style="margin-left:20px" type="primary" icon="el-icon-search" circle @click="searchbtn"></el-button>
        </el-form-item>
        <div v-show="isgood" >
          <el-form-item label="UID：" prop="uid">
            <div style="width: 300px">
              <el-input v-model="formData.uid" placeholder="请输入UID" />
            </div>
          </el-form-item>
          <el-form-item label="指定奖品">
            <el-radio-group v-model="formData.gid">
              <el-radio style="margin-bottom:10px" :disabled="item.stock === 0" v-for="item in goodlist" :key="item.id" :label="item.id">{{item.name}} 库存({{item.stock}})</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>   
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitHandler">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
  </d2-container>
</template>

<script>
import { crudOptions } from './crud' // 上文的crudOptions配置
import { d2CrudPlus } from '@/components/d2-crud-plus'
import { GetList, getGoods, addObj, downData, recoverySend } from '@/api/winner' // 查询添加修改删除的http请求接口
// import { resetPassword } from '@/api/user'
export default {
  name: 'page1',
  mixins: [d2CrudPlus.crud],
  data () {
    return {
      queryData: {
        aid: '',
        state: '',
        uid: ''
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      tableLoading: false,
      submitLoading: false,
      dialogFormVisible: false,
      formData: {
        aid: '',
        gid: '',
        uid: ''
      },
      isgood: false,
      goodlist: [],
      aidArr: [],
      dialogFormTitle: ''
    }
  }, // 最核心部分，继承d2CrudPlus.crud
  created () {
    this.initColumns()
  },
  methods: {
    getCrudOptions () {
      return crudOptions
    },
    doRefresh () {
      this._getTableData()
    }, // 数据请求
    _getTableData () {
      const { pagination, queryData } = this
      const { aid, state, uid } = queryData
      this.tableLoading = true
      GetList(pagination.currentPage, aid, state, uid).then(res => {
        const { list = [], pagination, aidArr } = res || {}
        this.tableData = list
        // this.tableData.push(_data)
        pagination && (this.pagination = pagination)
        aidArr && (this.aidArr = aidArr)
      }).finally(() => {
        this.tableLoading = false
      })
    },
    changeHandler (current) {
      this.pagination.currentPage = current
      this._getTableData()
    },
    queryHandler () {
      this.pagination.currentPage = 1
      this._getTableData()
    },
    // 添加
    submitHandler () {
      const { formData } = this
      this.submitLoading = true
      addObj({ ...formData }).then(res => {
        this.dialogFormVisible = false
        this._getTableData()
      }).finally(() => {
        this.submitLoading = false
      })
    },
    addHandler () {
      this.isgood = false
      this.dialogFormTitle = '新增'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.resetForm()
      })
    },
    resetForm () {
      delete this.formData.id
      this.$refs.form.resetFields()
    },
    searchbtn () {
      const { aid } = this.formData
      getGoods(aid).then(res => {
        this.goodlist = res
        this.isgood = true
      }).finally(() => {
        this.tableLoading = false
      })
    },
    getBackName ({ aid }) {
      return this.aidArr.find(item => item.id === aid).title
    },
    editHandler ({id}) {
      this.$router.push({
          path: `/morecon?id=${id}`
        })
    },
    bufbtn ({id, type}) {
      if (type != '0') {
        console.log('jlj')
        this.$confirm('您确定是否要补发?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          recoverySend(id).then(res => {
            this._getTableData()
          }).finally(() => {
            this.submitLoading = false
          })
        }).catch(() => {
        })
      }
    },
    daocbtn () {
      const { aid } = this.queryData
      if (aid) {
        downData(aid).then(res => {
          // window.location.hash = res
        }).finally(() => {
          this.tableLoading = false
        })
      }else {
        this.$message.error('请选择活动')
      }
    }
  }
}
</script>
<style>
.el-pagination {
    white-space: nowrap;
    padding: 15px 5px;
    color: #303133;
    font-weight: 700;
}
</style>
